<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {getArticleDetail} from "@/api/article.js";
import {useRoute, useRouter} from "vue-router";
import 'highlightjs-line-numbers.js';
// 引入 highlight.js 样式
import 'highlight.js/styles/monokai.css';
import {registerLanguage} from "@/utils/hljs-lang.js";
import ArticleComment from "@/pages/frontend/blog/ArticleComment.vue";
import PrevNextArticle from "@/pages/frontend/blog/PrevNextArticle.vue";
import VIcon from "@/components/icon/VIcon.vue";
import {hljs_copy_plugin} from "@/utils/hljs-copy.js";

const $router = useRouter();
const $route = useRoute();

onMounted(async () => {
  console.log('组件加载...')
  // 获取动态路由参数
  if (!initArticleId()) {
    return;
  }
  await registerLanguage();
  await queryArticleDetail();
});

watch(() => $route.path, async () => {
  if (!initArticleId()) {
    return;
  }
  await queryArticleDetail();
}, {deep: true});

const article = ref(null);
const loading = ref(false);
const articleId = ref(null);
const show = ref(false);

const queryArticleDetail = async () => {
  loading.value = true;
  await getArticleDetail(articleId.value).then(async (res) => {
    article.value = res.data;
    show.value = true;
    // 等待 DOM 更新完成后，执行代码高亮
    await nextTick(() => {
      document.querySelectorAll('pre code').forEach((block) => {
        // code 标签添加 data-original-code 属性，用于后续复制时获取原始代码
        block.setAttribute('data-original-code', block.textContent);
        // 添加复制按钮
        hljs_copy_plugin(block);
        // 渲染代码高亮
        hljs.highlightElement(block);
      });
      // 启用插件渲染行号
      hljs.initLineNumbersOnLoad({
        singleLine: true // 可选，是否只对单行代码进行行号显示
      });
      loading.value = false;
    });
  }).catch(err => {
    console.log(err);
    loading.value = false;
  });
};

const initArticleId = () => {
  const {id} = $router.currentRoute.value.params;
  if (!id) {
    return false;
  }
  articleId.value = id;
  return true;
}
const postOtherInfo = ref([
  {icon: 'User', value: 'authorName', label: '作者', default: '未知'},
  {icon: 'Calendar', value: 'publishedTime', label: '发布日期'},
  {icon: 'CollectionTag', value: 'categoryName', label: '文章分类'},
  {icon: 'View', value: 'views', label: '浏览量', default: 0},
]);
</script>

<template>
  <div class="v-read-article">
    <div class="v-post-right" v-loading="loading">
      <div class="v-article-area" id="blog-article">
        <div class="v-read-title">
          {{ article?.title }}
        </div>
        <div class="v-post-info" v-if="show">
          <template v-for="item in postOtherInfo">
            <div>
              <el-tooltip effect="dark" :content="item?.label" placement="top">
                <v-icon :icon="item?.icon" size="16"/>
              </el-tooltip>
              <span>{{ article[item?.value] || item?.default }}</span>
            </div>
          </template>
        </div>
        <el-divider></el-divider>
        <div class="v-read-content" v-html="article?.content"></div>
        <el-divider>
          正文结束
        </el-divider>
        <div class="v-tags-box">
          <template v-for="tag in article?.tagsList">
            <el-tag type="success" effect="dark">{{ tag }}</el-tag>
          </template>
        </div>
      </div>
      <!-- 上一篇、下一篇文章 -->
      <prev-next-article :id="articleId" :key="Math.random()"/>
      <div class="v-article-comment">
        <div class="v-comment-title">评论列表</div>
        <article-comment :key="Math.random()"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(pre>code) {
  border-radius: 8px;
}

:deep(.hljs) {
}

:deep(.hljs-ln td:nth-child(2)) {
  padding-left: 10px;
}

:deep(.hljs-ln td:nth-child(1)) {
  border-right: 1px solid #D1D9E1;
  padding-right: 4px;
}

:deep(.v-read-content ul) {
  list-style: none;
  
  > li {
    padding: 4px;
    
    &::before {
      content: "✨";
    }
  }
}

:deep(.v-read-content ol) {
  margin-left: 20px;
  
  > li {
    padding: 4px;
  }
}

:deep(.v-read-content p) {
  line-height: 30px;
}

:deep(.v-read-content>table) {
  border-collapse: collapse;
  padding: 10px;
  
  th {
    padding: 10px;
    background-color: #ECF4FA;
  }
  
  td {
    padding: 5px;
  }
  
  tr:nth-child(2n) {
    background-color: var(--el-color-warning-light-9);
  }
  
  tr:nth-child(2n+3) {
    background-color: var(--el-color-success-light-9);
  }
  
  tr:hover {
    cursor: default;
    background-color: rgba(0, 0, 0, 0.05);
  }
}

:deep(.v-read-content blockquote) {
  margin: 10px 0;
  padding: 10px;
  background-color: #F5F2F0;
  border-left: 5px solid #B4D5FF;
}

:deep(.v-read-content h1) {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

:deep(.v-read-content h2) {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

:deep(.v-read-content h3) {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

:deep(.v-read-content h4) {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

:deep(.v-read-content span>code) {
  background-color: #F3F4F4;
  color: #EF7060;
  padding: 0 4px;
}

:deep(div[data-w-e-type="todo"]) {
  margin: 4px 0;
  display: flex;
  align-items: center;
  
  &::before {
    content: "🎯";
  }
  
  > input {
    display: none;
    margin-right: 5px;
  }
}

.v-post-info {
  font-size: 12px;
  margin-top: 5px;
  padding: 0 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  
  > div {
    display: flex;
    align-items: center;
    margin-right: 10px;
    
    > span {
      color: #999999;
    }
  }
}

.v-tags-box {

}

.v-read-article {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
  
  .v-article-area {
    width: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;
    
    .v-read-title {
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    
    .v-read-content {
      font-size: 16px;
    }
  }
}

.v-article-comment {
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  
  .v-comment-title {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  
  .v-comment-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background-color: #409EFF;
    margin-right: 6px;
    border-radius: 8px;
  }
}
</style>